<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人信息</title>

		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/font-awesome.min.css" />
		<style>
			header .navbar,
			header .navbar-brand {
				height: 60px;
			}
			
			header .navbar {
				border-radius: 0;
				font-size: 18px;
			}
			
			header .navbar-brand {
				font-size: 26px;
			}
			
			header .navbar-form {
				margin-top: 13px;
				margin-bottom: 13px;
			}
			
			header .navbar-nav {
				margin-top: 5px;
				margin-bottom: 5px;
				margin-left: 15px;
			}
		</style>

	</head>

	<body>
		<!--顶部导航栏-->
		<header>
			<nav class="navbar navbar-default">
				<a class="navbar-brand" href="home.html">
					及第竞赛网
				</a>
				<ul class="nav navbar-nav">
					<li>
						<a href="home.html">首页</a>
					</li>
					<li>
						<a href="matchInfo.html">比赛信息</a>
					</li>
					<li>
						<a href="notice.html">公告</a>
					</li>
				</ul>

				<div class="navbar-form pull-right">
					<div class="dropdown">
						<a data-toggle="dropdown" class="dropdown-toggle btn btn-default">
							<i class="fa fa-user"></i>
							<span>个人信息</span>
							<span class="caret"></span>
						</a>

						<ul class="dropdown-menu">
							<li>
								<a href="personalInfo.html">
									<i class="fa fa-user-circle-o"></i>
									<span>个人信息</span>
								</a>
							</li>
							<li>
								<a href="home.html">
									<i class="fa fa-close"></i>
									<span>退出</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="navbar-form pull-right">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-search"></i></span>
						<input type="text" class="form-control" placeholder="输入你想要搜索的内容" />
						<div class="input-group-btn">
							<button class="btn btn-default">搜索</button>
						</div>
					</div>
				</div>
			</nav>
		</header>
		<!--顶部导航栏结束-->

		<div class="" style="margin: 15px;">

			<nav>
				<ul class="breadcrumb">
					<li>
						<a href="home.html">
							<i class="fa fa-home"></i>
							<span>首页</span>
						</a>
					</li>
					<li>
						<a href="personalInfo.html">
							<span>个人信息</span>
						</a>
					</li>
				</ul>
			</nav>
			<!--面包屑导航结束-->

			<div style="margin: 15px;">
				<!--个人信息-->
				<div>
					<h3 class="">个人信息</h3>
					<div>
						<div class="form-inline">
							<label>姓名:</label>
							<input class="form-control" type="text" readonly="readonly" />
						</div>
						<br />
						<div class="form-inline">
							<label>密码:</label>
							<input class="form-control" type="text" readonly="readonly" />
							<button class="btn btn-default">修改密码</button>
						</div>
					</div>
				</div>
				<!--个人信息结束-->

				<!--报名信息-->
				<div>
					<h3 class="">报名信息</h3>
					<div>
						<!--列表及操作-->
						<!--操作-->
						<div>
							<!--列表-->
							<div>
								<table class="table table-bordered table-hover table-responsive ">
									<thead>
										<tr>
											<td>
												<strong>比赛名称</strong>
											</td>
											<td>
												<strong>团队名</strong>
											</td>
											<td>
												<strong>队长名</strong>
											</td>
											<td>
												<strong>报名状态</strong>
											</td>
											<td>
												<strong></strong>
											</td>
										</tr>
									</thead>
									<tr>
										<td>
											<a data-toggle="modal" data-target="#detailMatchInfo">xxx</a>
										</td>
										<td></td>
										<td></td>
										<td></td>
										<td>
											<a data-toggle="modal" data-target="#detailEnterInfo">详情</a>
										</td>
									</tr>
								</table>
							</div>
							<!--列表结束-->

						</div>
						<!--列表及操作结束-->
						<!--分页导航-->
						<center>
							<ul class="pagination ">
								<li>
									<a @click="getajax(1) ">首页</a>
								</li>
								<li>
									<a @click="getajax(page-1) ">上一页</a>
								</li>
								<li>
									<li v-for="value in showpage ">
										<a style="background: red; " @click="getajax(value) " v-if="page==value ">
											{{value}}
										</a>

										<a v-else @click="getajax(value) ">{{value}}</a>

									</li>
								</li>
								<li>
									<a @click="getajax(page+1) ">下一页</a>
								</li>
								<li>
									<a @click="getajax(countpage) ">尾页</a>
								</li>
							</ul>
						</center>
						<!--分页导航结束-->
					</div>
				</div>
				<!--报名信息结束-->

				<!--获奖信息-->
				<div>
					<h3 class="">获奖信息</h3>
					<div>
						<!--列表及操作-->
						<!--操作-->
						<div>
							<!--列表-->
							<div>
								<table class="table table-bordered table-hover table-responsive ">
									<thead>
										<tr>
											<td>
												<strong>比赛名称</strong>
											</td>
											<td>
												<strong>姓名</strong>
											</td>
											<td>
												<strong>等级</strong>
											</td>
											<td>
												<strong>获奖时间</strong>
											</td>
										</tr>
									</thead>
									<tr>
										<td>
											<a data-toggle="modal" data-target="#detailMatchInfo">xxx</a>
										</td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
								</table>
							</div>
							<!--列表结束-->

						</div>
						<!--列表及操作结束-->
						<!--分页导航-->
						<center>
							<ul class="pagination ">
								<li>
									<a @click="getajax(1) ">首页</a>
								</li>
								<li>
									<a @click="getajax(page-1) ">上一页</a>
								</li>
								<li>
									<li v-for="value in showpage ">
										<a style="background: red; " @click="getajax(value) " v-if="page==value ">
											{{value}}
										</a>

										<a v-else @click="getajax(value) ">{{value}}</a>

									</li>
								</li>
								<li>
									<a @click="getajax(page+1) ">下一页</a>
								</li>
								<li>
									<a @click="getajax(countpage) ">尾页</a>
								</li>
							</ul>
						</center>
						<!--分页导航结束-->
					</div>
				</div>
				<!--获奖信息结束-->

			</div>

			<!--比赛详情弹出框 start-->
			<div class="modal" id="detailMatchInfo">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
							<h4>比赛详情</h4>
						</div>

						<div class="modal-body">
							<table class="table table-bordered">
								<tr>
									<td><label>比赛名称:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>队名:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>队长名:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>报名时间:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>比赛时间:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>比赛类型:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>发布时间:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>主办单位:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
							</table>
						</div>
						<div class="modal-footer">
							<button class="btn btn-primary" data-dismiss="modal">确定</button>
						</div>
					</div>
				</div>
			</div>
			<!--比赛详情弹出框 end-->

			<!--报名详情弹出框 start-->
			<div class="modal" id="detailEnterInfo">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
							<h4>报名详情</h4>
						</div>

						<div class="modal-body">
							<table class="table table-bordered">
								<tr>
									<td><label>比赛名称:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>队名:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>队长名:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>成员:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>提交时间:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>状态:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
							</table>
						</div>
						<div class="modal-footer">
							<button class="btn btn-primary" data-dismiss="modal">确定</button>
						</div>
					</div>
				</div>
			</div>
			<!--报名详情弹出框 end-->

			<script type="text/javascript " src="../js/jquery-3.3.1.min.js "></script>
			<script type="text/javascript " src="../js/bootstrap.min.js "></script>

	</body>

</html>